<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品详情 - 花礼相伴</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- FontAwesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background-color: #f8f8f8;
        }
        .product-quantity-btn {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body class="bg-gray-100">
    <!-- 主体内容 -->
    <div class="min-h-screen flex flex-col">
        <!-- 导航栏 -->
        <header class="bg-white p-4 border-b border-gray-200 shadow-sm">
            <div class="container mx-auto flex items-center justify-between">
                <a href="home.html" class="text-2xl font-bold text-rose-500 flex items-center">
                    <i class="fas fa-flower text-rose-500 mr-2"></i>
                    花礼相伴
                </a>
                <div class="hidden lg:block w-1/3">
                    <div class="relative">
                        <input type="text" placeholder="搜索鲜花、场景..." 
                            class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-rose-500">
                        <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    </div>
                </div>
                <nav class="hidden md:flex space-x-6">
                    <a href="home.html" class="text-gray-600 hover:text-rose-500">首页</a>
                    <a href="categories.html" class="text-gray-600 hover:text-rose-500">分类</a>
                    <a href="cart.html" class="text-gray-600 hover:text-rose-500">购物车</a>
                </nav>
                <div class="flex items-center space-x-4">
                    <a href="cart.html" class="p-2 relative">
                        <i class="fas fa-shopping-cart text-gray-600 text-xl"></i>
                        <span class="absolute top-0 right-0 bg-rose-500 text-white rounded-full text-xs w-4 h-4 flex items-center justify-center">3</span>
                    </a>
                    <a href="login.html" class="hidden md:block text-gray-600 hover:text-rose-500">登录</a>
                    <a href="register.html" class="hidden md:block text-white bg-rose-500 px-4 py-2 rounded-lg hover:bg-rose-600 transition duration-300">注册</a>
                </div>
            </div>
            <!-- 移动端搜索栏 -->
            <div class="mt-3 relative md:hidden">
                <input type="text" placeholder="搜索鲜花、场景..." 
                    class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-rose-500">
                <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            </div>
        </header>

        <!-- 主体内容区域 -->
        <main class="flex-grow container mx-auto px-4 py-6">
            <!-- 面包屑导航 -->
            <nav class="text-sm mb-6">
                <ol class="flex flex-wrap">
                    <li class="flex items-center">
                        <a href="home.html" class="text-gray-500 hover:text-rose-500">首页</a>
                        <span class="mx-2 text-gray-400">/</span>
                    </li>
                    <li class="flex items-center">
                        <a href="categories.html" class="text-gray-500 hover:text-rose-500">爱情鲜花</a>
                        <span class="mx-2 text-gray-400">/</span>
                    </li>
                    <li>
                        <span class="text-gray-700">浪漫红玫瑰花束</span>
                    </li>
                </ol>
            </nav>

            <!-- 产品详情 -->
            <div class="bg-white rounded-lg shadow-sm overflow-hidden">
                <div class="flex flex-col md:flex-row">
                    <!-- 产品图片区域 -->
                    <div class="w-full md:w-1/2">
                        <div class="p-4">
                            <!-- 主图 -->
                            <div class="mb-4 rounded-lg overflow-hidden">
                                <img src="https://images.unsplash.com/photo-1586968895917-80585d521b92?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" 
                                    alt="红玫瑰花束" class="w-full h-80 md:h-96 object-cover">
                            </div>
                            <!-- 缩略图 -->
                            <div class="grid grid-cols-4 gap-2">
                                <div class="border-2 border-rose-500 rounded-md overflow-hidden">
                                    <img src="https://images.unsplash.com/photo-1586968895917-80585d521b92?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" 
                                        alt="红玫瑰花束 - 角度1" class="w-full h-20 object-cover">
                                </div>
                                <div class="border border-gray-200 rounded-md overflow-hidden">
                                    <img src="https://images.unsplash.com/photo-1561181286-d5b4e8f44178?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" 
                                        alt="红玫瑰花束 - 角度2" class="w-full h-20 object-cover">
                                </div>
                                <div class="border border-gray-200 rounded-md overflow-hidden">
                                    <img src="https://images.unsplash.com/photo-1556702353-08bdc2df387f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" 
                                        alt="红玫瑰花束 - 角度3" class="w-full h-20 object-cover">
                                </div>
                                <div class="border border-gray-200 rounded-md overflow-hidden">
                                    <img src="https://images.unsplash.com/photo-1587052755556-89808205c097?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" 
                                        alt="红玫瑰花束 - 角度4" class="w-full h-20 object-cover">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 产品信息区域 -->
                    <div class="w-full md:w-1/2 p-4 md:p-6 lg:p-8">
                        <h1 class="text-xl md:text-2xl lg:text-3xl font-bold text-gray-800 mb-2">浪漫红玫瑰花束</h1>
                        <div class="flex items-center mb-4">
                            <div class="flex text-yellow-400">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star-half-alt"></i>
                            </div>
                            <span class="text-gray-500 ml-2">4.8 (128条评价)</span>
                        </div>
                        <div class="mb-6">
                            <p class="text-3xl text-rose-500 font-bold">¥199.00</p>
                            <p class="text-gray-500 line-through">¥259.00</p>
                        </div>
                        <div class="border-t border-gray-100 py-4">
                            <div class="mb-4">
                                <h3 class="text-gray-700 font-medium mb-2">商品描述：</h3>
                                <p class="text-gray-600">精选19朵顶级厄瓜多尔红玫瑰，搭配尤加利叶、满天星，赠送精美贺卡。玫瑰代表浓烈的爱，是表达爱意的永恒经典之选。</p>
                            </div>
                            <div class="mb-4">
                                <h3 class="text-gray-700 font-medium mb-2">花语：</h3>
                                <p class="text-gray-600">热烈的爱，永恒的承诺，浓情似火。</p>
                            </div>
                        </div>
                        <div class="mb-6">
                            <h3 class="text-gray-700 font-medium mb-2">规格：</h3>
                            <div class="flex flex-wrap gap-2">
                                <button class="px-4 py-2 border border-rose-500 text-rose-500 bg-rose-50 rounded-lg font-medium">19朵</button>
                                <button class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg font-medium">33朵</button>
                                <button class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg font-medium">52朵</button>
                                <button class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg font-medium">99朵</button>
                            </div>
                        </div>
                        <div class="mb-6">
                            <h3 class="text-gray-700 font-medium mb-2">包装选择：</h3>
                            <div class="flex flex-wrap gap-2">
                                <button class="px-4 py-2 border border-rose-500 text-rose-500 bg-rose-50 rounded-lg font-medium">精美包装</button>
                                <button class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg font-medium">豪华礼盒</button>
                                <button class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg font-medium">简约风格</button>
                            </div>
                        </div>
                        <div class="mb-6">
                            <h3 class="text-gray-700 font-medium mb-2">数量：</h3>
                            <div class="flex items-center">
                                <button class="product-quantity-btn border border-gray-300 rounded-l text-gray-600 hover:bg-gray-100">-</button>
                                <input type="text" value="1" class="border-t border-b border-gray-300 text-center w-12 h-8" readonly>
                                <button class="product-quantity-btn border border-gray-300 rounded-r text-gray-600 hover:bg-gray-100">+</button>
                                <span class="ml-4 text-gray-500">库存: 98件</span>
                            </div>
                        </div>
                        <div class="flex flex-wrap gap-4">
                            <button class="flex-1 md:flex-none md:w-48 px-6 py-3 bg-rose-500 text-white rounded-lg font-medium hover:bg-rose-600 transition duration-300 flex items-center justify-center">
                                <i class="fas fa-shopping-cart mr-2"></i> 加入购物车
                            </button>
                            <button class="flex-1 md:flex-none md:w-48 px-6 py-3 border border-rose-500 text-rose-500 rounded-lg font-medium hover:bg-rose-50 transition duration-300 flex items-center justify-center">
                                立即购买
                            </button>
                            <button class="md:ml-2 w-12 h-12 flex items-center justify-center border border-gray-300 rounded-lg text-gray-600 hover:text-rose-500 hover:border-rose-500 transition duration-300">
                                <i class="far fa-heart text-xl"></i>
                            </button>
                        </div>
                        <div class="mt-6 flex items-center text-sm text-gray-500">
                            <div class="flex items-center mr-6">
                                <i class="fas fa-shield-alt mr-1 text-green-500"></i> 
                                <span>花店直营</span>
                            </div>
                            <div class="flex items-center mr-6">
                                <i class="fas fa-truck mr-1 text-green-500"></i> 
                                <span>当日送达</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-sync-alt mr-1 text-green-500"></i> 
                                <span>七天无理由退换</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 产品详情选项卡 -->
                <div class="border-t border-gray-200">
                    <div class="flex border-b border-gray-200">
                        <button class="px-6 py-3 text-rose-500 border-b-2 border-rose-500 font-medium">商品详情</button>
                        <button class="px-6 py-3 text-gray-600 font-medium">用户评价(128)</button>
                        <button class="px-6 py-3 text-gray-600 font-medium">配送说明</button>
                    </div>
                    <div class="p-6">
                        <h3 class="text-lg font-bold mb-4">商品详情</h3>
                        <div class="space-y-4 text-gray-600">
                            <p>【花材】精选19朵顶级厄瓜多尔红玫瑰，搭配尤加利叶、满天星点缀。</p>
                            <p>【包装】环保牛皮纸包装，精美丝带系成蝴蝶结，赠送精美贺卡一张。</p>
                            <p>【花艺师寄语】红玫瑰象征着热烈的爱与深深的祝福，是表达爱意的不二之选。</p>
                            <p>【适用场景】表白、恋爱纪念日、求婚、情人节、生日等，适合送给恋人、爱人等。</p>

                            <div>
                                <h4 class="font-medium mb-2">【保鲜小贴士】</h4>
                                <ol class="list-decimal list-inside space-y-1 pl-4">
                                    <li>收到花束后，请斜剪花茎底部1-2厘米，然后插入清水中。</li>
                                    <li>每天更换清水，并重新修剪花茎。</li>
                                    <li>避免阳光直射，远离热源，放置在通风良好的地方。</li>
                                    <li>如赠送的是鲜花保鲜液，请按说明使用。</li>
                                </ol>
                            </div>
                        </div>
                        <div class="mt-6 space-y-4">
                            <img src="https://images.unsplash.com/photo-1577090727079-a854293d7cd2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" 
                                alt="红玫瑰花束细节" class="w-full rounded-lg">
                            <img src="https://images.unsplash.com/photo-1494972308805-463bc619d34e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" 
                                alt="包装展示" class="w-full rounded-lg">
                        </div>
                    </div>
                </div>
            </div>

            <!-- 相关产品推荐 -->
            <section class="mt-8">
                <h2 class="text-xl font-bold mb-4">相关产品推荐</h2>
                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
                    <a href="product-detail.html" class="bg-white rounded-lg overflow-hidden border border-gray-100 hover:shadow-md transition duration-300">
                        <img src="https://images.unsplash.com/photo-1533616688419-b7a585564566?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" 
                            alt="混合鲜花花束" class="w-full h-36 md:h-48 object-cover">
                        <div class="p-3 md:p-4">
                            <h3 class="font-medium md:text-lg truncate">缤纷混合花束</h3>
                            <p class="text-rose-500 font-bold mt-1 md:mt-2 md:text-lg">¥259</p>
                        </div>
                    </a>
                    <a href="product-detail.html" class="bg-white rounded-lg overflow-hidden border border-gray-100 hover:shadow-md transition duration-300">
                        <img src="https://images.unsplash.com/photo-1563241527-3004b7be0ffd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" 
                            alt="向日葵花束" class="w-full h-36 md:h-48 object-cover">
                        <div class="p-3 md:p-4">
                            <h3 class="font-medium md:text-lg truncate">阳光向日葵花束</h3>
                            <p class="text-rose-500 font-bold mt-1 md:mt-2 md:text-lg">¥229</p>
                        </div>
                    </a>
                    <a href="product-detail.html" class="bg-white rounded-lg overflow-hidden border border-gray-100 hover:shadow-md transition duration-300">
                        <img src="https://images.unsplash.com/photo-1526047932273-341f2a7631f9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" 
                            alt="郁金香花束" class="w-full h-36 md:h-48 object-cover">
                        <div class="p-3 md:p-4">
                            <h3 class="font-medium md:text-lg truncate">彩色郁金香花束</h3>
                            <p class="text-rose-500 font-bold mt-1 md:mt-2 md:text-lg">¥289</p>
                        </div>
                    </a>
                    <a href="product-detail.html" class="bg-white rounded-lg overflow-hidden border border-gray-100 hover:shadow-md transition duration-300">
                        <img src="https://images.unsplash.com/photo-1561181286-d5b4e8f44178?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" 
                            alt="粉色玫瑰花束" class="w-full h-36 md:h-48 object-cover">
                        <div class="p-3 md:p-4">
                            <h3 class="font-medium md:text-lg truncate">甜蜜粉玫瑰花束</h3>
                            <p class="text-rose-500 font-bold mt-1 md:mt-2 md:text-lg">¥239</p>
                        </div>
                    </a>
                </div>
            </section>
        </main>
    </div>

    <!-- 注意：根据需求，不需要添加页脚部分 -->

    <script>
        // 数量加减按钮
        document.addEventListener('DOMContentLoaded', function() {
            const minusBtn = document.querySelector('.product-quantity-btn:first-child');
            const plusBtn = document.querySelector('.product-quantity-btn:last-of-type');
            const quantityInput = document.querySelector('input[type="text"]');
            
            minusBtn.addEventListener('click', function() {
                let value = parseInt(quantityInput.value);
                if(value > 1) {
                    quantityInput.value = value - 1;
                }
            });
            
            plusBtn.addEventListener('click', function() {
                let value = parseInt(quantityInput.value);
                if(value < 99) {
                    quantityInput.value = value + 1;
                }
            });
        });
    </script>
</body>
</html>